<script setup lang="ts">
import { ref } from 'vue'
import { saveImageToPhotosAlbum, showModal } from '@uni-helper/uni-promises'

const index = ref(0)
const isAuthSavePhoto = ref(false)
const photoUrl = ref(['https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager56ff14a8-b036-470a-8bba-8d26116a9a81.png'])
const arr = ref(['https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager81364707-80ab-4722-bf93-046e1cd745eb.png'])
// 弹出模态框提示用户是否要去设置页授权
async function onShowModal() {
    const res = await showModal({
        title: '检测到您没有打开保存到相册的权限，是否前往设置打开？',
    })
    if (res.confirm) {
        console.log('用户点击确定')
        onOpenSetting()
    }
    else if (res.cancel) {
        console.log('用户点击取消')
    }
}
// 打开设置，引导用户授权
async function onOpenSetting() {
    const res = await uni.openSetting({
    })
    console.log(res.authSetting)
    if (!res.authSetting['scope.writePhotosAlbum']) {
        uni.showToast({
            title: '您未授权',
            icon: 'none',
            duration: 1500,
        })
        isAuthSavePhoto.value = true
    }
    else { // 接受授权
        isAuthSavePhoto.value = false
        onSaveToPhone() // 接受授权后保存图片
    }
}
onShow(() => {
})

async function onSaveToPhone() {
    await saveImageToPhotosAlbum({
        filePath: photoUrl.value[index.value],
    })
    uni.showToast({
        title: '保存成功',
        duration: 3000,
    })
}
</script>

<template>
    <NavbarContainer nav-title="客服助手">
        <div class="mycontainer">
            <div class="titlebox">
                <div class="title">
                    <div>在使用过程中遇到问题</div>
                    <div>可以随时获得服务和解答</div>
                </div>
            </div>
            <div class="QRcodeboxout">
                <div class="QRcodebox"
                     style=" background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerd7bd5ae1-9378-476c-93ca-068f2a2edcab.png');background-size: 100%;background-repeat: no-repeat;">
                    <div class="innerbox">
                        <div class="imgbox">
                            <image style="border-radius: 16rpx;" :src="arr[index]" class="img" mode="widthFix" />
                        </div>
                        <div class="text">
                            保存二维码 微信添加客服
                        </div>
                    </div>
                </div>
            </div>
            <div class="btnbox">
                <button v-if="!isAuthSavePhoto" class="btn" @click="onSaveToPhone">
                    保存图片
                </button>
                <button v-else class="btn button-hover" @click="onShowModal">
                    保存图片
                </button>
            </div>
        </div>
    </NavbarContainer>
</template>

<style scoped>
.mycontainer {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #FBFDFF 0%, #C5E3F9 100%);
    box-sizing: border-box;
}

.titlebox {
    padding: 54rpx 50rpx 20rpx;
    width: 100%;
    box-sizing: border-box;
}

.title {
    width: 100%;
    box-sizing: border-box;
    font-size: 52rpx;
    font-weight: 700;
    text-align: center;
    padding: 63rpx 32rpx 28rpx;
    background-image: url('https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager74a439c8-e51b-4452-a9cd-b16c748ff772.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.QRcodeboxout {
    width: 100%;
    height: 750rpx;
    box-sizing: border-box;
    padding: 0 70rpx;
}

.QRcodebox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 132rpx 74rpx 82rpx;
}

.innerbox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #EEF3F9;
    border-radius: 16rpx;
    padding: 10rpx;
}

.innerbox .imgbox {
    width: 100%;
    height: 440rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.innerbox .imgbox .img {
    width: 90%;
    height: 90%;
}

.innerbox .text {
    width: 100%;
    height: calc(100% - 440rpx);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #202536;
}

.btnbox {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 125rpx;
}

.btn {
    width: 416rpx;
    height: 88rpx;
    border-radius: 44rpx;
    color: #ffffff;
    background-color: #3E5FF5;
    font-size: 34rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>

<route lang="json">
{
    "style": {}
}
</route>
